<template>
  <el-row>
    <div style="width: 100%;height: 4580px;overflow: hidden">
      <el-col :span="24">
        <div id="bg">
          <img src="src/assets/img/index.png" style="width: 130px;height: 50px;margin-left: 400px">
          <ul id="aaa" style="list-style: none;margin-left: 550px;margin-top: -33px;z-index: 2000;color: white">
            <li style="float: left">首页</li>
            <li style="float: left;margin-left: 30px">长租</li>
            <li style="float: left;margin-left: 30px">国际租车</li>
            <li style="float: left;margin-left: 30px">企业租车</li>
            <li style="float: left;margin-left: 30px">网点查询</li>
            <li style="float: left;margin-left: 30px">精彩活动</li>
            <li style="float: left;margin-left: 30px">开放平台</li>
            <li v-if="inEnd" @click="denglu()" style="float: left;margin-left: 60px;background: #FFC75D;width: 60px;height: 20px;text-align: center;font-size: 0.3px;line-height: 20px;color: black;border-radius: 3px;margin-top: -2px">登陆/注册</li>
            <li v-if="isPoint" style="float: left;margin-left: 60px;width: 60px;height: 20px;text-align: center;font-size: 0.3px;line-height: 20px;color: black;border-radius: 3px;margin-top: -5px">
              <el-dropdown :show-timeout="0" placement="bottom">
            <span class="el-dropdown-link" style="color: white">
               <img src="https://img0.baidu.com/it/u=1034508305,2958640538&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"  style="width: 30px;height: 30px;margin-left: -10px;border-radius: 15px" :alt="userName">
              {{ userName }}
            </span>
                <el-dropdown-menu slot="dropdown" style="width: 60px;height: 60px">
                  <el-dropdown-item @click.native="closes()" style="font-size: 10px;margin-top: -6px">退出</el-dropdown-item>
                  <el-dropdown-item @click.native="quanbudingdan" style="font-size: 10px;margin-top: 0px">订单</el-dropdown-item>
                </el-dropdown-menu>

              </el-dropdown>
            </li>
            <li style="float: left;margin-left: 60px;background: #DDE6EC;width: 100px;height: 20px;text-align: center;font-size: 0.3px;line-height: 20px;color: black;border-radius: 3px;margin-top: -2px"><i class="el-icon-phone" style="margin-left: -3px"></i>     400-616-6666</li>

          </ul>
        </div>
        <div class="grid-content bg-purple-dark" style="height: 400px;overflow: hidden">
          <el-carousel :interval="5000" height="478px" arrow="always">
            <el-carousel-item v-for="item in imgs" :key="item" :style="'background:url('+item+') no-repeat center'">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div id="ss"> <el-input style="width: 300px;margin-top: 30px;margin-left: 40px"  class="input-with-select">
          <el-select slot="prepend" placeholder="请选择">
            <el-option label="北京" value="1"></el-option>
            <el-option label="天津" value="2"></el-option>
            <el-option label="上海" value="3"></el-option>
          </el-select>
        </el-input>
          <el-input
            style="width: 250px;margin-left: 20px"
           placeholder="请选择日期"
            type="date"
       >
        </el-input>
          <div style="width: 140px;height: 35px;background: #FFC75D;font-size: 16px;text-align: center;line-height: 35px;border-radius: 6px;margin-left: 630px;margin-top: -35px">立即选车</div>
        </div>



        <div  v-if="carInfo" style="margin-top: 60px;height: 40px;font-size: 26px;color: #171721;line-height: 40px;margin-left: 810px;overflow: hidden">热门车型推荐</div>
        <div style="margin-top: 4px;margin-left: 770px" v-if="carInfo">精选神州用户推荐最受好评的热门车型</div>
        <div  style="width: 1000px;height: 500px;margin-top: 40px;margin-left: 400px;overflow: hidden;" v-if="carInfo">
          <div style="width: 50%;height: 400px;overflow: hidden;margin-top: 10px">
            <div style="width: 100%;height: 300px;">
              <img :src="require('@/assets/img/'+car.imgId)" style="width: 500px;height: 300px;margin-top: 10px"/>
            </div>
            <div style="font-size: 25px;margin-left: 40px;margin-top: 20px">{{ $data.car.carName }}</div>
            <div style="font-size: 15px;color: #686876;margin-left: 40px;margin-top: 10px">{{ car.carType }}
              <el-button type="info" @click="carWatch(car)" style="margin-left: 260px;margin-top: -60px;background: #353945;border: 1px solid #353945">立即查看 ></el-button>
            </div>
          </div>
          <div style="width: 50%;height: 400px;margin-left: 500px;margin-top: -400px;overflow: hidden">
            <ul style="list-style: none;margin-top: 10px">
              <li style="float: left">
                <div style="width: 230px;height: 180px;margin-left: -30px">
                  <div style="width: 230px;height: 120px;background: #0BB2D4">
                    <img :src="require('@/assets/img/'+car1.imgId)" style="width: 230px;height: 120px;"/>
                  </div>
                  <div style="font-size: 15px;margin-left: 10px;margin-top: 10px">{{ $data.car1.carName }}</div>
                  <div style="font-size: 10px;color: #686876;margin-left: 10px;margin-top: 10px">{{ car1.carType }}</div>
                  <div style="margin-left: 135px;margin-top: -24px"><el-button @click="carWatch(car1)" size="mini" style="background: #353945;border: 1px solid #353945;color: white">立即查看 ></el-button></div>

                </div>
              </li>
              <li style="float: left">
                <div style="width: 230px;height: 180px;margin-left: 20px">
                  <div style="width: 230px;height: 120px">
                    <img :src="require('@/assets/img/'+car2.imgId)" style="width: 230px;height: 120px;"/>
                  </div>
                  <div style="font-size: 15px;margin-left: 10px;margin-top: 10px">{{ $data.car2.carName }}</div>
                  <div style="font-size: 10px;color: #686876;margin-left: 10px;margin-top: 10px">{{ car2.carType }}</div>
                  <div style="margin-left: 135px;margin-top: -24px"><el-button @click="carWatch(car2)" size="mini" style="background: #353945;border: 1px solid #353945;color: white">立即查看 ></el-button></div>
                </div>
              </li>
            </ul>
            <ul style="list-style: none">
              <li style="float: left">
                <div style="width: 230px;height: 180px;margin-left: -30px;margin-top: 20px">
                  <div style="width: 230px;height: 120px;background: #0BB2D4">
                    <img :src="require('@/assets/img/'+car3.imgId)" style="width: 230px;height: 120px;"/>
                  </div>
                  <div style="font-size: 15px;margin-left: 10px;margin-top: 10px">{{ $data.car3.carName }}</div>
                  <div style="font-size: 10px;color: #686876;margin-left: 10px;margin-top: 10px">{{ car3.carType }}</div>
                  <div style="margin-left: 135px;margin-top: -24px"><el-button size="mini" @click="carWatch(car3)" style="background: #353945;border: 1px solid #353945;color: white">立即查看 ></el-button></div>
                </div>
              </li>
              <li style="float: left">
                <div style="width: 230px;height: 180px;margin-left: 20px;margin-top: 20px">
                  <div style="width: 230px;height: 120px;background: #0BB2D4">
                    <img :src="require('@/assets/img/'+car4.imgId)" style="width: 230px;height: 120px;"/>
                  </div>
                  <div style="font-size: 15px;margin-left: 10px;margin-top: 10px">{{ $data.car4.carName }}</div>
                  <div style="font-size: 10px;color: #686876;margin-left: 10px;margin-top: 10px">{{ car4.carType }}</div>
                  <div style="margin-left: 135px;margin-top: -24px"><el-button size="mini" @click="carWatch(car4)" style="background: #353945;border: 1px solid #353945;color: white">立即查看 ></el-button></div>
                </div>
              </li>
            </ul>
          </div>
        </div>


        <div style="width: 100%;height: 500px;margin-top: 50px" v-if="carTestInfo">
          <div style="width: 40%;height: 400px;margin-left: 200px">
            <img :src="require('@/assets/img/'+carTest.imgId)" style="width: 100%;height: 420px;margin-top: 10px"/>
          </div>
          <div style="float: left;width: 40%;height: 400px;margin-left: 960px;margin-top: -400px">
            <p style="font-size: 18px;margin-left: 40px">{{ carTest.carName }}</p>
            <ul style="list-style: none">
              <li style="float: left">
                <div style="width: 100px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                  <i class="el-icon-goods" style="line-height: 50px;margin-left: 5px"></i>
                  价格
                </div>
              </li>
              <li style="float: left">
                <div style="width: 100px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                  &nbsp;&nbsp;&nbsp;${{ carTest.price }}/天
                </div>
              </li>
              <li style="float: left">
                <div style="width: 100px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                  <i class="el-icon-star-off" style="line-height: 50px;margin-left: 5px"></i>
                  车牌号
                </div>
              </li>
              <li style="float: left">
                <div style="width: 100px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                  &nbsp;&nbsp;&nbsp;{{ carTest.carCode }}
                </div>
              </li>
              <li style="float: left">
                <div style="width: 100px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                  <i class="el-icon-star-off" style="line-height: 50px;margin-left: 5px"></i>
                  车辆类型
                </div>
              </li>
              <li style="float: left">
                <div style="width: 100px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                  &nbsp;&nbsp;&nbsp;{{ carTest.carType }}
                </div>
              </li>
            </ul>
            <ul style="list-style: none">
              <li style="float: left;margin-top: 50px;margin-left: -600px">
                <div style="width: 100px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                  <i class="" style="line-height: 50px;margin-left: 15px"></i>
                  生产日期
                </div>
              </li>
              <li style="float: left;margin-top: 50px;margin-left: -500px">
                <div style="width: 500px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                  &nbsp;&nbsp;&nbsp;{{ carTest.productionLife }}
                </div>
              </li>
            </ul>
            <div style="width: 600px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6;margin-top: 118px;margin-left: 40px">
              <i class="" style="line-height: 50px;margin-left: 15px"></i>
              汽车简介
            </div>
            <div style="width: 600px;height: 50px;background: white;border: 1px solid #EFF1F6;margin-left: 40px">
              <i class="" style="line-height: 50px;margin-left: 15px"></i>
              {{ carTest.back }}
            </div>
            <div style="margin-top: 10px">
              <div style="width: 90px;height: 40px;background: #FAFAFA;border: 1px solid #EFF1F6;margin-left: 40px">
                <i class="" style="line-height: 40px;margin-left: 15px"></i>
                取车地点
              </div>
              <v-distpicker @selected='selected' style="margin-left: 140px;margin-top: -40px"></v-distpicker>
            </div>
            <div style="margin-top: 10px">
              <div style="width: 90px;height: 40px;background: #FAFAFA;border: 1px solid #EFF1F6;margin-left: 40px">
                <i class="" style="line-height: 40px;margin-left: 15px"></i>
                还车地点
              </div>
              <v-distpicker @selected='selected1' style="margin-left: 140px;margin-top: -40px"></v-distpicker>
            </div>
            <div>
              <el-input
                type="date"
                style="margin-left: 140px;width: 200px;margin-top: 10px"
                v-model="carTest.date">
              </el-input>
              <div style="width: 90px;height: 40px;background: #FAFAFA;border: 1px solid #EFF1F6;margin-left: 40px;margin-top: -40px">
                <i class="" style="line-height: 40px;margin-left: 15px"></i>
                还车时间
                <el-button @click="yuding()" type="warning" style="margin-left: 500px;margin-top: -10px">立即预定</el-button>
              </div>
            </div>
          </div>
          <el-dialog
            title="确认订单信息"
            :visible.sync="dialogVisible"
            width="35%"
            :before-close="handleClose">
            <p style="margin-top: -30px;margin-left: 30px">{{this.carTest.dingdanCode}}</p>
            <ul style="list-style: none">
              <li style="float: left">
                <div style="width: 100px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                  <i class="" style="line-height: 50px;margin-left: 15px"></i>
                  汽车名称
                </div>
              </li>
              <li style="float: left">
                <div style="width: 180px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                  &nbsp;&nbsp;&nbsp;{{ carTest.carName }}
                </div>
              </li>
              <li style="float: left">
                <div style="width: 100px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                  <i class="" style="line-height: 50px;margin-left: 15px"></i>
                  车牌号
                </div>
              </li>
              <li style="float: left">
                <div style="width: 180px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                  &nbsp;&nbsp;&nbsp;{{ carTest.carCode }}
                </div>
              </li>
              <li style="float: left">
                <div style="width: 100px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                  <i class="" style="line-height: 50px;margin-left: 15px"></i>
                  单价
                </div>
              </li>
              <li style="float: left">
                <div style="width: 180px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                  &nbsp;&nbsp;&nbsp;{{ carTest.price }}
                </div>
              </li>
            </ul>
            <ul style="list-style: none">
              <li style="float: left">
                <div style="width: 100px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                  <i class="" style="line-height: 50px;margin-left: 15px"></i>
                  用户名称
                </div>
              </li>
              <li style="float: left">
                <div style="width: 180px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                  &nbsp;&nbsp;&nbsp;{{ userName }}
                </div>
              </li>
              <li style="float: left">
                <div style="width: 100px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                  <i class="" style="line-height: 50px;margin-left: 15px"></i>
                  用户邮箱
                </div>
              </li>
              <li style="float: left">
                <div style="width: 180px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                  &nbsp;&nbsp;&nbsp;{{ email }}
                </div>
              </li>
              <li style="float: left">
                <div style="width: 100px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                  <i class="" style="line-height: 50px;margin-left: 15px"></i>
                  还车时间
                </div>
              </li>
              <li style="float: left">
                <div style="width: 180px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                  &nbsp;&nbsp;&nbsp;{{ carTest.date }}
                </div>
              </li>
            </ul>
            <ul style="list-style: none">
              <li style="float: left">
                <div style="width: 100px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                  <i class="" style="line-height: 50px;margin-left: 15px"></i>
                  取车地点
                </div>
              </li>
              <li style="float: left">
                <div style="width: 180px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                  &nbsp;&nbsp;&nbsp;{{ carTest.quche.province }}-{{ carTest.quche.city }}-{{ carTest.quche.area }}
                </div>
              </li>
              <li style="float: left">
                <div style="width: 100px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                  <i class="" style="line-height: 50px;margin-left: 15px"></i>
                  还车地点
                </div>
              </li>
              <li style="float: left">
                <div style="width: 180px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                  &nbsp;&nbsp;&nbsp;{{ carTest.huanche.province }}-{{ carTest.huanche.city }}-{{ carTest.huanche.area }}
                </div>
              </li>
              <li style="float: left">
                <div style="width: 100px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                  <i class="" style="line-height: 50px;margin-left: 15px"></i>
                  总价
                </div>
              </li>
              <li style="float: left">
                <div style="width: 180px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                  &nbsp;&nbsp;&nbsp;{{ carTest.all }}
                </div>
              </li>
            </ul>
            <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false" style="margin-top: 10px;">取 消</el-button>
    <el-button type="primary" @click="tijiaodingdan()" style="margin-right: 30px;margin-bottom: 50px">确 定</el-button>
  </span>
          </el-dialog>
        </div>

        <div v-if="userDingdan" style="width: 100%;height: 800px;margin-top: 50px">
            <div style="width: 24%;height: 800px;margin-left: 200px">
              <el-tabs type="border-card" @tab-click="quanbudingdan">
                <el-tab-pane label="全部订单">
                    <el-input v-model="carCodeName" placeholder="请输入汽车名或订单号查询" style="width: 350px"></el-input>
                    <el-button icon="el-icon-search" circle style="margin-left: 20px"  @click="quanbudingdan"></el-button>
                    <div style="width: 100%;height:675px;overflow: auto;">
                      <div style="width: 100%;height: 200px;margin-top: 10px;border: 3px solid #E6ECF0;border-radius: 4px"  v-for="item in userDingdans" @click="dingdanview(item)">
                        <img :src="require('@/assets/img/'+item.carImgId)" style="width: 150px;height: 120px;margin-top: 40px;margin-left: 20px"/>
                        <div style="font-size: 18px;margin-left: 190px;margin-top: -117px">{{item.carName}}</div>
                        <div style="font-size: 18px;margin-left: 350px;margin-top: -23px;color: #00b7ee;font-size: 15px">{{item.status==1?'进行中':item.status==3?'审批中':item.status==4?'已驳回':item.status==5?'逾期使用':'已完结'}}</div>
                        <div style="font-size: 18px;margin-left: 190px;margin-top: 20px;color: #00b7ee;font-size: 15px">还车时间:</div>
                        <div style="font-size: 18px;margin-left: 280px;margin-top: -20px;color: #00b7ee;font-size: 15px">{{item.useTime}}</div>
                        <div style="font-size: 18px;margin-left: 190px;margin-top: 10px;color: #00b7ee;font-size: 15px">下单时间:</div>
                        <div style="font-size: 18px;margin-left: 280px;margin-top: -20px;color: #00b7ee;font-size: 15px">{{item.createTime}}</div>
                        <div style="font-size: 18px;margin-left: 190px;margin-top: 10px;color: #00b7ee;font-size: 15px">订单编号:</div>
                        <div style="font-size: 18px;margin-left: 280px;margin-top: -20px;color: #00b7ee;font-size: 15px">{{item.orderId}}</div>
                        <div style="font-size: 18px;margin-left: 280px;margin-top: 20px;color: black;font-size: 15px">总价：<span style="color: red">{{item.totalPrice}}</span></div>
                      </div >
                    </div>
                </el-tab-pane>
                <el-tab-pane label="待审批订单">
                  <el-input v-model="carCodeName" placeholder="请输入汽车名或订单号查询" style="width: 350px"></el-input>
                  <el-button icon="el-icon-search" circle style="margin-left: 20px"  @click="quanbudingdan"></el-button>
                  <div style="width: 100%;height:675px;overflow: auto;">
                    <div style="width: 100%;height: 200px;margin-top: 10px;border: 3px solid #E6ECF0;border-radius: 4px"  v-for="item in userDingdans" @click="dingdanview(item)">
                      <img :src="require('@/assets/img/'+item.carImgId)" style="width: 150px;height: 120px;margin-top: 40px;margin-left: 20px"/>
                      <div style="font-size: 18px;margin-left: 190px;margin-top: -117px">{{item.carName}}</div>
                      <div style="font-size: 18px;margin-left: 350px;margin-top: -23px;color: #00b7ee;font-size: 15px">{{item.status==1?'进行中':item.status==3?'审批中':item.status==4?'已驳回':item.status==5?'逾期使用':'已完结'}}</div>
                      <div style="font-size: 18px;margin-left: 190px;margin-top: 20px;color: #00b7ee;font-size: 15px">还车时间:</div>
                      <div style="font-size: 18px;margin-left: 280px;margin-top: -20px;color: #00b7ee;font-size: 15px">{{item.useTime}}</div>
                      <div style="font-size: 18px;margin-left: 190px;margin-top: 10px;color: #00b7ee;font-size: 15px">下单时间:</div>
                      <div style="font-size: 18px;margin-left: 280px;margin-top: -20px;color: #00b7ee;font-size: 15px">{{item.createTime}}</div>
                      <div style="font-size: 18px;margin-left: 190px;margin-top: 10px;color: #00b7ee;font-size: 15px">订单编号:</div>
                      <div style="font-size: 18px;margin-left: 280px;margin-top: -20px;color: #00b7ee;font-size: 15px">{{item.orderId}}</div>
                      <div style="font-size: 18px;margin-left: 280px;margin-top: 20px;color: black;font-size: 15px">总价：<span style="color: red">{{item.totalPrice}}</span></div>
                    </div >
                  </div>
                </el-tab-pane>
                <el-tab-pane label="进行中订单">
                  <el-input v-model="carCodeName" placeholder="请输入汽车名或订单号查询" style="width: 350px"></el-input>
                  <el-button icon="el-icon-search" circle style="margin-left: 20px"  @click="quanbudingdan"></el-button>
                  <div style="width: 100%;height:675px;overflow: auto;">
                    <div style="width: 100%;height: 200px;margin-top: 10px;border: 3px solid #E6ECF0;border-radius: 4px"  v-for="item in userDingdans" @click="dingdanview(item)">
                      <img :src="require('@/assets/img/'+item.carImgId)" style="width: 150px;height: 120px;margin-top: 40px;margin-left: 20px"/>
                      <div style="font-size: 18px;margin-left: 190px;margin-top: -117px">{{item.carName}}</div>
                      <div style="font-size: 18px;margin-left: 350px;margin-top: -23px;color: #00b7ee;font-size: 15px">{{item.status==1?'进行中':item.status==3?'审批中':item.status==4?'已驳回':item.status==5?'逾期使用':'已完结'}}</div>
                      <div style="font-size: 18px;margin-left: 190px;margin-top: 20px;color: #00b7ee;font-size: 15px">还车时间:</div>
                      <div style="font-size: 18px;margin-left: 280px;margin-top: -20px;color: #00b7ee;font-size: 15px">{{item.useTime}}</div>
                      <div style="font-size: 18px;margin-left: 190px;margin-top: 10px;color: #00b7ee;font-size: 15px">下单时间:</div>
                      <div style="font-size: 18px;margin-left: 280px;margin-top: -20px;color: #00b7ee;font-size: 15px">{{item.createTime}}</div>
                      <div style="font-size: 18px;margin-left: 190px;margin-top: 10px;color: #00b7ee;font-size: 15px">订单编号:</div>
                      <div style="font-size: 18px;margin-left: 280px;margin-top: -20px;color: #00b7ee;font-size: 15px">{{item.orderId}}</div>
                      <div style="font-size: 18px;margin-left: 280px;margin-top: 20px;color: black;font-size: 15px">总价：<span style="color: red">{{item.totalPrice}}</span></div>
                    </div >
                  </div>
                </el-tab-pane>
                <el-tab-pane label="已逾期订单">
                  <el-input v-model="carCodeName" placeholder="请输入汽车名或订单号查询" style="width: 350px"></el-input>
                  <el-button icon="el-icon-search" circle style="margin-left: 20px"  @click="quanbudingdan"></el-button>
                  <div style="width: 100%;height:675px;overflow: auto;">
                    <div style="width: 100%;height: 200px;margin-top: 10px;border: 3px solid #E6ECF0;border-radius: 4px"  v-for="item in userDingdans" @click="dingdanview(item)">
                      <img :src="require('@/assets/img/'+item.carImgId)" style="width: 150px;height: 120px;margin-top: 40px;margin-left: 20px"/>
                      <div style="font-size: 18px;margin-left: 190px;margin-top: -117px">{{item.carName}}</div>
                      <div style="font-size: 18px;margin-left: 350px;margin-top: -23px;color: #00b7ee;font-size: 15px">{{item.status==1?'进行中':item.status==3?'审批中':item.status==4?'已驳回':item.status==5?'逾期使用':'已完结'}}</div>
                      <div style="font-size: 18px;margin-left: 190px;margin-top: 20px;color: #00b7ee;font-size: 15px">还车时间:</div>
                      <div style="font-size: 18px;margin-left: 280px;margin-top: -20px;color: #00b7ee;font-size: 15px">{{item.useTime}}</div>
                      <div style="font-size: 18px;margin-left: 190px;margin-top: 10px;color: #00b7ee;font-size: 15px">下单时间:</div>
                      <div style="font-size: 18px;margin-left: 280px;margin-top: -20px;color: #00b7ee;font-size: 15px">{{item.createTime}}</div>
                      <div style="font-size: 18px;margin-left: 190px;margin-top: 10px;color: #00b7ee;font-size: 15px">订单编号:</div>
                      <div style="font-size: 18px;margin-left: 280px;margin-top: -20px;color: #00b7ee;font-size: 15px">{{item.orderId}}</div>
                      <div style="font-size: 18px;margin-left: 280px;margin-top: 20px;color: black;font-size: 15px">总价：<span style="color: red">{{item.totalPrice}}</span></div>
                    </div >
                  </div>
                </el-tab-pane>
              </el-tabs>
            </div>
            <div v-if="dingdanviewss" style="width: 60%;height: 800px;margin-left: 750px;margin-top: -800px">
              <div style="width: 100%;height: 260px;background: white;overflow: hidden">
                <div style="margin-left: 30px;margin-top: 20px">汽车信息</div>
                <div style="width: 280px;height: 180px">
                  <img :src="require('@/assets/img/'+carImgId)" style="width: 280px;height: 180px">
                </div>
                <ul style="list-style: none;margin-left: 200px;margin-top: -160px">
                  <li style="float: left;color: #0BB2D4;margin-left: 120px">汽车名称:&nbsp;<span style="color: black">{{ dingdanviews.carName }}</span></li>
                  <li style="float: left;color: #0BB2D4;margin-left: 120px">汽车类型:&nbsp;<span style="color: black">{{ dingdanviews.carType }}</span></li>
                  <li style="float: left;color: #0BB2D4;margin-left: 120px">车牌号:&nbsp;<span style="color: black">{{ dingdanviews.carName }}</span></li>
                </ul>
                <ul style="list-style: none;margin-left: 800px;margin-top: 60px">
                  <li style="float: left;color: #0BB2D4;margin-left: -480px">生产日期:&nbsp;<span style="color: black">{{ dingdanviews.createTime }}</span></li>
                  <li style="float: left;color: #0BB2D4;margin-left: -275px">发动机编号:&nbsp;<span style="color: black">{{ dingdanviews.carCode }}</span></li>
                  <li style="float: left;color: #0BB2D4;margin-left: -70px">行驶公里:&nbsp;<span style="color: black">{{ dingdanviews.carCode }}</span></li>
                </ul>

                <ul style="list-style: none;margin-left: 800px;margin-top: 120px">
                  <li style="float: left;color: #0BB2D4;margin-left: -480px">单价:&nbsp;<span style="color: black">{{ dingdanviews.price }}</span></li>
                  <li style="float: left;color: #0BB2D4;margin-left: -275px">描述:&nbsp;<span style="color: black">{{ dingdanviews.back }}</span></li>
                </ul>

              </div>
              <div style="width: 33%;height: 260px;background: white;margin-top: 10px;overflow: hidden">
                <div style="margin-top: 20px;margin-left: 30px">订单人信息</div>
                <div style="margin-left: 30px;margin-top: 20px"><span style="color: #00b7ee">用户名称:</span>&nbsp;<span>{{ dingdanviews.userName }}</span></div>
                <div style="margin-left: 30px;margin-top: 20px"><span style="color: #00b7ee">用户邮箱:</span>&nbsp;<span>{{ dingdanviews.userEmail }}</span></div>
                <div style="margin-left: 30px;margin-top: 20px"><span style="color: #00b7ee">用户身份证号:</span>&nbsp;<span>暂无</span></div>
              </div>
              <div style="width: 65%;height: 260px;background: white;margin-top: -260px;margin-left: 400px;overflow: hidden">
                <div style="margin-left: 40px;margin-top: 20px">订单信息</div>
                <ul style="list-style: none">
                  <li style="float: left">
                    <div style="width: 150px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                      <i class="" style="line-height: 50px;margin-left: 40px"></i>
                      订单编号
                    </div>
                  </li>
                  <li style="float: left">
                    <div style="width: 150px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                      &nbsp;&nbsp;&nbsp;{{ dingdanviews.orderId }}
                    </div>
                  </li>
                  <li style="float: left">
                    <div style="width: 150px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                      <i class="" style="line-height: 50px;margin-left: 40px"></i>
                      状态
                    </div>
                  </li>
                  <li style="float: left">
                    <div style="width: 150px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                      &nbsp;&nbsp;&nbsp;{{ dingdanviews.status }}
                    </div>
                  </li>
                </ul>
                <ul style="list-style: none">
                  <li style="float: left">
                    <div style="width: 150px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                      <i class="" style="line-height: 50px;margin-left: 40px"></i>
                      下单时间
                    </div>
                  </li>
                  <li style="float: left">
                    <div style="width: 150px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                      &nbsp;&nbsp;&nbsp;{{ dingdanviews.createTime }}
                    </div>
                  </li>
                  <li style="float: left">
                    <div style="width: 150px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                      <i class="" style="line-height: 50px;margin-left: 40px"></i>
                      还车时间
                    </div>
                  </li>
                  <li style="float: left">
                    <div style="width: 150px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                      &nbsp;&nbsp;&nbsp;{{ dingdanviews.useTime }}
                    </div>
                  </li>
                </ul>
                <ul style="list-style: none">
                  <li style="float: left">
                    <div style="width: 150px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                      <i class="" style="line-height: 50px;margin-left: 40px"></i>
                      取车地点
                    </div>
                  </li>
                  <li style="float: left">
                    <div style="width: 150px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                      &nbsp;&nbsp;&nbsp;{{ dingdanviews.pickupLocation }}
                    </div>
                  </li>
                  <li style="float: left">
                    <div style="width: 150px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                      <i class="" style="line-height: 50px;margin-left: 40px"></i>
                      还车地点
                    </div>
                  </li>
                  <li style="float: left">
                    <div style="width: 150px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                      &nbsp;&nbsp;&nbsp;{{ dingdanviews.returnLocation }}
                    </div>
                  </li>
                </ul>
                <ul style="list-style: none">
                  <li style="float: left">
                    <div style="width: 150px;height: 50px;background: #FAFAFA;border: 1px solid #EFF1F6">
                      <i class="" style="line-height: 50px;margin-left: 40px"></i>
                      总价
                    </div>
                  </li>
                  <li style="float: left">
                    <div style="width: 450px;height: 50px;background: white;border: 1px solid #EFF1F6;font-size: 15px;line-height: 50px">
                      &nbsp;&nbsp;&nbsp;{{ dingdanviews.totalPrice }}
                    </div>
                  </li>
                </ul>
              </div>
              <div style="width: 100%;height: 260px;background: white;margin-top: 10px;margin-left: 0px">

                <el-button type="primary" plain style="margin-left: 100px;margin-top: 100px" @click="updateDingdan">修改订单</el-button>
                <el-button type="primary" plain style="margin-left: 300px;margin-top: 100px" @click="quxiaoDingdan">取消订单</el-button>
              </div>
            </div>
            <div v-if="dingdanviewsss" style="width: 60%;height: 800px;margin-left: 750px;margin-top: -800px">
              <img src="/src/assets/img/zanwushuju.png" style="width: 400px;margin-left: 200px;margin-top: 150px">
              <div style="font-size: 28px;margin-left: 350px">暂无数据</div>
          </div>
        </div>
      </el-col>
    <el-col :span="6"><div class="grid-content bg-purple" style="height: 200px;margin-top: 0px;overflow: hidden">
      <img  class="bak1" src="/src/assets/img/test1.png">
      <p style="font-size: 25px;color: white;margin-top: 30px;margin-left: 50px">7*23小时客服</p>
      <p style="color: white;margin-top: 30px;margin-left: 50px">400-616-6666</p>
      <p style="color: white;margin-top: 20px;margin-left: 50px;font-size: 10px">预定-取车-用车-还车,全程为你提供所需帮助</p>
    </div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple-light" style="margin-top: 0px;overflow: hidden">
      <img class="bak1" src="/src/assets/img/test2.png">
      <p style="font-size: 25px;color: white;margin-top: 30px;margin-left: 50px">双信用免押租车</p>
      <p style="color: white;margin-top: 30px;margin-left: 50px">芝麻分满600/绑信用卡
      </p>
      <p style="color: white;margin-top: 20px;margin-left: 50px;font-size: 10px">支付宝芝麻信用600分及以上，或者绑定信用卡，即可享免押金租车</p>
    </div>
    </el-col>
    <el-col :span="6"><div class="grid-content bg-purple" style="height: 200px;margin-top: 0px;overflow: hidden">
      <img class="bak1" src="/src/assets/img/test3.png">
      <p style="font-size: 25px;color: white;margin-top: 30px;margin-left: 50px">支持自助取还车
      </p>
      <p style="color: white;margin-top: 30px;margin-left: 50px">
        全国超多自助取还点
      </p>
      <p style="color: white;margin-top: 20px;margin-left: 50px;font-size: 10px">用手机即可完成取还车，全程无接触，又快又安全</p>
    </div></el-col>
    <el-col :span="6"><div class="grid-content bg-purple-light" style="height: 200px;margin-top: 0px;overflow: hidden">
      <img class="bak1" src="/src/assets/img/test4.png">
      <p style="font-size: 25px;color: white;margin-top: 30px;margin-left: 50px">全程安全保障
      </p>
      <p style="color: white;margin-top: 30px;margin-left: 50px"> 优选多种方案保障出行安全
      </p>
      <p style="color: white;margin-top: 20px;margin-left: 50px;font-size: 10px">我们为您提供出行安全保障业务，让您用车途中不担心突发情况</p>
    </div></el-col>

    <el-col :span="24"><div class="grid-content bg-purple-dark" style="background: #757575;height: 478px;margin-top: 40px">
      <el-carousel :interval="5000" height="478px" arrow="always">
        <el-carousel-item v-for="item in imgs" :key="item" :style="'background:url('+item+') no-repeat center'">
        </el-carousel-item>
      </el-carousel>
    </div></el-col>

    <el-col :span="24"><div class="grid-content bg-purple" style="height: 520px">
        <div style="margin-top: 60px;height: 40px;font-size: 26px;color: #171721;line-height: 40px;margin-left: 850px">营业网点</div>
        <div style="margin-top: 4px;margin-left: 770px">全国3500+服务网点为您提供安全出行服务
        </div>
      <baidu-map
        id="allmap"
        @ready="mapReady">
      </baidu-map>
      </div></el-col>

      <el-col :span="24"><div class="grid-content bg-purple-dark" style="height: 520px;margin-top: 50px">
        <div>
          <img src="/src/assets/img/questionBg.png" id="img1">
          <div style="margin-top: 80px;height: 40px;font-size: 26px;color: #171721;line-height: 40px;margin-left: 830px">租车Q&A
          </div>
          <div style="margin-top: 4px;margin-left: 780px">每一个阶段，都值得留下美好时刻
          </div>
          <div style="background: white;width: 320px;height: 220px;border-radius: 4px;margin-left: 400px;margin-top: 30px;overflow: hidden">
            <div style="width: 100%;border-bottom: 1px solid #E5E5E5;height: 40px;overflow: hidden">
              <div style="border-radius: 10px;width: 40px;height: 20px;background: #FABE00;text-align: center;line-height: 20px;margin-top: 10px;margin-left: 10px">Q1</div>
              <div style="margin-left: 60px;margin-top: -18px">租车需要哪些证件</div>
            </div>
            <div style="font-size: 10px;margin-top: 10px;margin-left: 10px">身份证:大陆用户驾驶员二代身份证，年满18周岁,有
              效期需超过当次租期一一个月以上。<br/>
              <br/>
              驾驶证:本人国内有效驾驶证(正副本)，有效期需超
              过当次租期一个月以上。<br/><br/>
              港澳台客户准备澳港内地通行证或台湾居民来往大陆通
              行证，有效期超过当次租期两个月以上。<br/><br/>
              外籍客户提供护照，有效期超过当次租期两个月以上。
            </div>
          </div>
          <div style="background: white;width: 320px;height: 120px;border-radius: 4px;margin-left: 400px;margin-top: 30px">
            <div style="width: 100%;border-bottom: 1px solid #E5E5E5;height: 40px;overflow: hidden">
              <div style="border-radius: 10px;width: 40px;height: 20px;background: #FABE00;text-align: center;line-height: 20px;margin-top: 10px;margin-left: 10px">Q4</div>
              <div style="margin-left: 60px;margin-top: -18px">可以开哪些发票？</div>
            </div>
            <div style="font-size: 10px;margin-top: 10px;margin-left: 10px">
              国内租订单还车结算后以订单为单位，为您开具增值税<br/><br/>
              发票;支持电子发票和纸质发票。
            </div>
          </div>
          <div style="background: white;width: 320px;height: 170px;border-radius: 4px;margin-left: 750px;margin-top: -370px">
            <div style="width: 100%;border-bottom: 1px solid #E5E5E5;height: 40px;overflow: hidden">
              <div style="border-radius: 10px;width: 40px;height: 20px;background: #FABE00;text-align: center;line-height: 20px;margin-top: 10px;margin-left: 10px">Q2</div>
              <div style="margin-left: 60px;margin-top: -18px">有哪些网络预订方式？</div>
            </div>
            <div style="font-size: 10px;margin-left: 10px;margin-top: 10px">
              App:通过应用市场下载神州租车App进行预订。<br/><br/>
              小程序:在微信和支付宝平台搜索“神州租车”关键词找
              到小程序进行预订。<br/><br/>
              触屏版:浏览器中输入m.zuche com预订。
            </div>
          </div>
          <div style="background: white;width: 320px;height: 170px;border-radius: 4px;margin-left: 750px;margin-top: 30px">
            <div style="width: 100%;border-bottom: 1px solid #E5E5E5;height: 40px;overflow: hidden">
              <div style="border-radius: 10px;width: 40px;height: 20px;background: #FABE00;text-align: center;line-height: 20px;margin-top: 10px;margin-left: 10px">Q5</div>
              <div style="margin-left: 60px;margin-top: -18px">租车费用有哪些？</div>
            </div>
            <div style="font-size: 10px;margin-left: 10px;margin-top: 10px">
              必缴费用包括:车辆租赁及服务费、基础服务费、车辆<br>
              整备费共三项。<br><br>
              其他费用包括:送车.上门服务费、上门取车服务费、跨<br>
              网点还车服务费、异地还车服务费、加油服务费、超时<br>
              服务费等。
            </div>
          </div>
          <div style="background: white;width: 320px;height: 200px;border-radius: 4px;margin-left: 1100px;margin-top: -370px">
            <div style="width: 100%;border-bottom: 1px solid #E5E5E5;height: 40px;overflow: hidden">
              <div style="border-radius: 10px;width: 40px;height: 20px;background: #FABE00;text-align: center;line-height: 20px;margin-top: 10px;margin-left: 10px">Q3</div>
              <div style="margin-left: 60px;margin-top: -18px">有哪些预定流程？</div>
            </div>
            <div style="font-size: 10px;margin-top: 10px;margin-left: 10px">
              只需四步即可完成预订。<br/><br/>
              第1步:确定需要取还的地址和时间。<br/><br/>
              第2步:选择取还的网点和车型。<br/><br/>
              第3步:选择承租人。<br/><br/>
              第4步:订单确认，完成预订。
            </div>
          </div>
          <div style="background: white;width: 320px;height: 140px;border-radius: 4px;margin-left: 1100px;margin-top: 30px">
            <div style="width: 100%;border-bottom: 1px solid #E5E5E5;height: 40px;overflow: hidden">
              <div style="border-radius: 10px;width: 40px;height: 20px;background: #FABE00;text-align: center;line-height: 20px;margin-top: 10px;margin-left: 10px">Q6</div>
              <div style="margin-left: 60px;margin-top: -18px">可以选择哪些出行保障</div>
            </div>
            <div style="font-size: 10px;margin-top: 10px;margin-left: 10px">
              我们已为您提供基础服务保障，同时您也可以购买尊享<br>
              服务、尊享百万服务、尊享驾乘守护和全程无忧，让您<br>
              的出行更安心。
            </div>
          </div>
        </div>
      </div></el-col>

      <el-col :span="24"><div class="grid-content bg-purple-dark" style="height: 520px;margin-top: 50px"><div style="margin-top: 60px;height: 40px;font-size: 26px;color: #171721;line-height: 40px;margin-left: 830px">推荐出行方案</div>
        <div style="margin-top: 4px;margin-left: 800px">每一个阶段，都值得留下美好时刻
        </div>
        <div style="width: 450px;height: 350px;border-radius: 4px;margin-left: 400px;margin-top: 30px">
          <img src="/src/assets/img/travel1.jpg" style="width: 450px;height: 350px">
        </div>
        <div style="width: 250px;height: 160px;border-radius: 4px;margin-left: 880px;margin-top: -350px">
          <img src="/src/assets/img/travel2_eef64eafadcc4fbd503dedb2fe59bbec.png" style="width: 250px;height: 160px">
        </div>
        <div style="width: 250px;height: 160px;border-radius: 4px;margin-left: 880px;margin-top: 30px">
          <img src="/src/assets/img/travel3_8e578ac152467019f2a0258f0f200515.png" style="width: 250px;height: 160px">
        </div>

        <div style="width: 250px;height: 160px;border-radius: 4px;margin-left: 1150px;margin-top: -350px">
          <img src="/src/assets/img/travel4_c7d71f10a0d6c1734a40a93064cb4ce0.png" style="width: 250px;height: 160px">
        </div>
        <div style="width: 250px;height: 160px;border-radius: 4px;margin-left: 1150px;margin-top: 30px">
          <img src="/src/assets/img/travel5_0df9d93e414d8c7e68dba13d914b0749.png" style="width: 250px;height: 160px">
        </div>
      </div>

      </el-col>

      <el-col :span="24"><div class="grid-content bg-purple-dark" style="height: 450px;margin-top: 50px">
        <div style="margin-top: 60px;height: 40px;font-size: 26px;color: #171721;line-height: 40px;margin-left: 830px">神州大事记</div>
        <div style="margin-top: 4px;margin-left: 820px">神州租车原与您共同成长
        </div>
        <div style="width: 370px;height: 220px;border-radius: 4px;margin-left: 450px;margin-top: 30px">
          <img src="/src/assets/img/video.png" style="margin-left: -10px;height: 240px">
        </div>
        <div style="width: 400px;height: 220px;margin-left: 60px">
          <div style="width: 100%;height: 50px;border-bottom: 1px solid #F0F0F0;margin-left: 830px;margin-top: -220px">
            <ul style="list-style: none;float: left;margin-left: -60px">
              <li class="li3" style="">公司动态</li>
              <li class="li3">媒体报道</li>
              <li class="li3">优惠活动</li>
              <li class="li3">租车攻略</li>
            </ul>
          </div>
        <div style="width: 100%;height: 170px;margin-left: 810px">
          <ul>
            <li class="li4">"神州一站试你的玩电主场”神州租车上线新能源车辆试乘试驾服务
</li>
            <li class="li4">神州租车荣获2022年中国汽车租赁行业顾客最满意品牌</li>
            <li class="li4">租车市场传来利好万辆新车助力暑期出行</li>
            <li class="li4">神州租车与国银租赁强强联手两行业巨头达成融资租赁业务合作落地</li>
            <li class="li4">神州租车与国银租赁强强联手两行业巨头达成融资租赁业务合作落地</li>
          </ul>
        </div>
        </div>
      </div></el-col>
      <el-col :span="24"><div class="grid-content bg-purple-dark" style="background: #121C27;overflow:hidden;height: 500px;margin-top: 50px">
          <ul style="list-style: none;margin-left: 200px;margin-top: 60px">
            <li style="color: #A0A4A9;font-size: 20px">神州租车</li>
            <li class="li1">关于我们</li>
            <li class="li1">联系我们</li>
            <li class="li1">新闻中心</li>
            <li class="li1">资质信息</li>
          </ul>
          <ul style="list-style: none;margin-left: 400px;margin-top: -223px">
            <li style="color: #A0A4A9;font-size: 20px">合作伙伴</li>
            <li class="li1">投资者关系</li>
          </ul>
        <ul style="list-style: none;margin-left: 600px;margin-top: -83px">
          <li style="color: #A0A4A9;font-size: 20px">其他服务</li>
          <li class="li1">网站导航</li>
          <li class="li1">隐私保护</li>
        </ul>
        <ul style="list-style: none;margin-left: 1000px;margin-top: -130px;overflow: hidden">
          <li><img src="/src/assets/img/wechat.png" style="width: 100px;height: 100px;float: left"></li>
          <li><img src="/src/assets/img/wechat.png" style="width: 100px;height: 100px;float: left;margin-left: 40px"></li>
          <li><img src="/src/assets/img/wechat.png" style="width: 100px;height: 100px;float: left;margin-left: 40px"></li>
          <li><img src="/src/assets/img/wechat.png" style="width: 100px;height: 100px;float: left;margin-left: 40px"></li>
        </ul>
        <ul style="list-style: none;margin-left: 995px">
          <li style="float: left;color: white">下载神州租车App</li>
          <li style="float: left;color: white;margin-left: 50px">微信小程序</li>
          <li style="float: left;color: white;margin-left: 60px">关注微信公众号</li>
          <li style="float: left;color: white;margin-left: 45px">支付宝小程序</li>
        </ul>
        <ul style="list-style: none;margin-top: 150px;margin-left: 200px;overflow: hidden">
          <li style="color: #A0A4A9;float: left">友情链接:</li>
          <li class="li2">北京旅游网</li>
          <li class="li2">旅游指南</li>
          <li class="li2">北青网</li>
          <li class="li2">欣欣旅游商城</li>
          <li class="li2">免费午餐网</li>
          <li class="li2">中国街景地图</li>
          <li class="li2">劲旅网</li>
          <li class="li2">凤凰古城</li>
          <li class="li2">二手车交易</li>
          <br>
          <li style="color: white;
  float: left;
  margin-left: 120px;margin-top: 10px">旅评网</li>
          <li style="color: white;
  float: left;
  margin-left: 86px;
  margin-top: 10px">拉拉勾旅游网</li>
          <li style="color: white;
  float: left;
  margin-left: 34px;
  margin-top: 10px">凯撒旅游网</li>
          <li style="color: white;
  float: left;
  margin-left: 30px;
  margin-top: 10px">同程网</li>
          <li style="color: white;
  float: left;
  margin-left: 105px;
  margin-top: 10px">新浪旅游</li>
          <li style="color: white;
  float: left;
  margin-left: 74px;
  margin-top: 10px">游凤凰网</li>
          <li style="color: white;
  float: left;
  margin-left: 86px;
  margin-top: 10px">国旅在线</li>
          <li style="color: white;
  float: left;
  margin-left: 48px;
  margin-top: 10px">穷游出境游</li>
          <li style="color: white;
  float: left;
  margin-left: 45px;
  margin-top: 10px">首都航空</li>










        </ul>
        <div style="width: 1200px;height: 20px;border-bottom: 1px solid #2A333D;margin-left: 240px"></div>
        <p style="color:white;font-size: 10px;margin-left: 240px;margin-top: 20px">Copyright@2008- 2021 www.zuche com All Rights Reserved.北京神州汽车租赁有限公司 <img src="/src/assets/img/index4.png" style="width: 15px;height: 15px;margin-top: -2px">京ICP备10005002号京公网安备11010502046201号<img src="/src/assets/img/sf.jpg" style="width: 100px;margin-left: 220px"><img src="/src/assets/img/297.png" style="width: 100px;margin-left: 10px">
        </p>
      </div></el-col>
    </div>
    <div id="essl">
      <el-dialog :visible.sync="dialogTableVisible" :close-on-click-modal="false"  width="1150px">
        <denglu v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="findAllCar()"></denglu>
      </el-dialog>
    </div>
    <el-dialog :visible.sync="updateding" :close-on-click-modal="false"  width="550px">
      <div style="font-size: 20px;margin-top: -20px">取车地点:</div>
      <v-distpicker @selected='selected' style="margin-left: 140px;margin-top: -30px;overflow: hidden"></v-distpicker>
      <div style="font-size: 20px;margin-top: 40px">还车地点:</div>
      <v-distpicker @selected='selected1' style="margin-left: 140px;margin-top: -30px"></v-distpicker>
      <el-input v-model="dingdanUpdate.date" type="date" style="width: 200px;margin-left: 0px;margin-top: 40px"></el-input>
      <el-button @click="updateding = false" style="margin-left: 300px">取消</el-button>
      <el-button type="primary" @click="dataFormSubmit()">确定</el-button>
    </el-dialog>
  </el-row>
</template>

<script>
  import denglu from './shenzhoudenglu'
  import VDistpicker from 'v-distpicker'
  export default {
    components: {
      denglu,
      VDistpicker
    },
    created() {
      this.findAllCar()
      this.userName= sessionStorage.getItem("user");
      this.email= sessionStorage.getItem("email");
      this.userId= sessionStorage.getItem("userId");
      if(this.userName!=null){
        this.isPoint = true;
        this.inEnd=false
      }else {
        this.isPoint = false;
        this.inEnd=true
      }
    },
    data(){
      return{
        updateding:false,
        dingdanviewss:false,
        dingdanviewsss:true,
        carCodeName:'',
        email:'',
        userId:'',
        dingdanUpdate:{
          totalPrice:'',
            date:'',
          quche:{
            province:'',
            city:'',
            area:'',
          },
          huanche:{
            province:'',
            city:'',
            area:'',
          }
        },
        carTestInfo:false,
        carInfo:true,
        carTest:{
          carId:'',
          dingdanCode:'',
          carInfo:true,
          carTestisInfo:false,
          carType:'',
          date:'',
          imgId:'',
          price:'',
          productionLife:'',
          carCode:'',
          carName:'',
          back:'',
          all:'',
          quche:{
            province:'',
            city:'',
            area:'',
          },
          huanche:{
            province:'',
            city:'',
            area:'',
          }
        },
        dialogTableVisible:false,
        dialogVisible: false,
        imgs: [
          require('@/assets/img/1.jpg'),
          require('@/assets/img/2.jpg'),
          require('@/assets/img/3.jpg'),
          require('@/assets/img/4.jpg'),
          require('@/assets/img/5.jpg'),
        ],
        images: [
          require('@/assets/img/tab1.jpg'),
          require('@/assets/img/tab2.jpg'),
          require('@/assets/img/tab3.jpg'),
          require('@/assets/img/tab4.jpg'),
        ],
        userDingdan:false,
        point: "",
        dataList:[],
        car:{},
        car1:{},
        car2:{},
        car3:{},
        car4:{},
        addOrUpdateVisible:false,
        user:{
          userName:'',
          sex:'',
          age:'',
          email:'',
        },
        carImgId:'1-10.jpg',
        dingdanviews:{},
        userName:'',
        isPoint:false,
        inEnd:true,
        time:'',
        cha:'',
        userDingdans:[],
        sta:'',
        str:['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R','S','T','U','V','W','X','Y','Z']
    }
    },
    methods: {
      quxiaoDingdan(){
        if(this.dingdanviews.status == 5 || this.dingdanviews.status == 1){
          var test = ""
          if(this.dingdanviews.status == 5){
            test="订单已逾期"
          }if(this.dingdanviews.status == 1){
            test="订单正在进行中"
          }
          this.$message({
            message:"订单号:"+this.dingdanviews.orderId+"无法被取消,原因:"+test,
            type: "warning"
          })
        }else {
          this.$http({
            url: this.$http.adornUrl('/CarOrderinfo/updateOrderAndCar'),
            method: 'post',
            data: this.$http.adornData({
              "id":this.dingdanviews.id,
              "carId":this.dingdanviews.carId,
            })
          }).then(({data})=> {
            if (data.code == 0) {
              this.$message({
                message: '取消成功',
                type: 'success'
              });
              this.updateding = false
              this.quanbudingdan
              window.location.reload()
            } else {
              this.$message({
                message: "取消失败,请重试",
                type: 'warning'
              });
              this.quanbudingdan
            }
          })
        }
      },
      yuding1(){
        this.time = Date.parse(new Date());

        var date = Date.parse(new Date(this.dingdanUpdate.date))
        this.cha = Math.abs(parseInt((this.time-date) / 1000 / 60 / 60 / 24))
        this.cha+1

        this.dingdanUpdate.all  =this.dingdanviews.price*this.cha
      },
      dataFormSubmit(){
        this.yuding1()
        this.$http({
          url: this.$http.adornUrl('/CarOrderinfo/update'),
          method: 'post',
          data: this.$http.adornData({
            "id":this.dingdanviews.id,
            "useTime":this.dingdanUpdate.date,
            "pickupLocation": this.dingdanUpdate.quche.province + this.dingdanUpdate.quche.city + this.dingdanUpdate.quche.area,
            "returnLocation": this.dingdanUpdate.huanche.province + this.dingdanUpdate.huanche.city + this.dingdanUpdate.huanche.area,
            "totalPrice":this.dingdanUpdate.all
          })
        }).then(({data})=>{
          if(data.code ==0){
            this.$message({
              message: '修改成功',
              type: 'success'
            });
            this.quanbudingdan
            this.updateding = false
            this.dingdanviewss  =false
            this.dingdanviewsss = true
          }else {
            this.$message({
              message: "修改失败,请重试",
              type: 'warning'
            });
            this.quanbudingdan
          }
        })
      },
      updateDingdan(){
        if(this.dingdanviews.status == 5 || this.dingdanviews.status == 1){
          var test = ""
          if(this.dingdanviews.status == 5){
            test="订单已逾期"
          }if(this.dingdanviews.status == 1){
            test="订单正在进行中"
          }
          this.$message({
            message:"订单号:"+this.dingdanviews.orderId+"无法被修改,原因:"+test,
            type: "warning"
          })
        }else {
          this.updateding = true
        }
      },
      dingdanview(item){
        console.log(item)
        this.dingdanviews = item;
        this.dingdanviewss = true
        this.dingdanviewsss = false
        this.carTestInfo = false
        this.carImgId = item.carImgId
      },
      quanbudingdan(tab){
        this.userDingdan = true;
        this.carInfo = false
        if(tab.label == '待审批订单'){
            this.sta = 3
        }else if(tab.label == '全部订单'){
          this.sta = null
        }else if(tab.label == '进行中订单'){
          this.sta = 1
        }else if(tab.label == '已逾期订单'){
          this.sta = 5
        }
        this.$http({
          url: this.$http.adornUrl('/CarOrderinfo/selByStatus'),
          method: 'post',
          data: this.$http.adornData({
              "status":this.sta ,
              "root":this.carCodeName,
              "userId": this.userId,
          })
        }).then(({data})=>{
          if(data.code ==0){
            this.$message({
              message: '查询订单成功',
              type: 'success'
            });
            this.userDingdans = data.list
          }else {
            this.$message({
              message: "查询订单失败",
              type: 'warning'
            });
          }
        })
      },
      tijiaodingdan(){
        this.$http({
          url: this.$http.adornUrl('/CarOrderinfo/insert'),
          method: 'post',
          data: this.$http.adornData({
            "orderId": this.carTest.dingdanCode,
            "carId": this.carTest.carId,
            "carImgId": this.carTest.imgId,
            "carName": this.carTest.carName,
            "carType": this.carTest.carType,
            "userId": this.userId,
            "carCode":this.carTest.carCode,
            "userName": this.userName,
            "userEmail": this.email,
            "useTime": this.carTest.productionLife,
            "price": this.carTest.price,
            "totalPrice": this.carTest.all,
            "back":this.carTest.back,
            "pickupLocation": this.carTest.quche.province + this.carTest.quche.city + this.carTest.quche.area,
            "returnLocation": this.carTest.huanche.province + this.carTest.huanche.city + this.carTest.huanche.area,
            "status": 3
          })
          }).then(({data})=>{
            if(data.code ==0){
              this.$message({
                message: '预约成功',
                type: 'success'
              });
              window.location.reload()
              this.dialogVisible = false
            }else {
              this.$message({
                message: "预约失败,请重试",
                type: 'warning'
              });
              this.findAllCar()
            }
          })
      },
      generateMixed(n){
        var res = "";
        for(var i = 0; i < n ; i ++) {
          var id = Math.ceil(Math.random()*35);
          res += this.str[id];
        }
        return res;
      },
      yuding(){
        this.dialogVisible = true
        this.carTest.dingdanCode = this.generateMixed(4)+this.carTest.productionLife
        this.time = Date.parse(new Date());

        var date = Date.parse(new Date(this.carTest.date))
        this.cha = Math.abs(parseInt((this.time-date) / 1000 / 60 / 60 / 24))
        this.cha+1

        this.carTest.all  =this.carTest.price*this.cha
      },
      selected1(data){

        this.province = data.province.value

        this.city = data.city.value

        this.area = data.area.value

        this.carTest.huanche.province = data.province.value
        this.carTest.huanche.city = data.city.value
        this.carTest.huanche.area = data.area.value

        this.dingdanUpdate.huanche.province = data.province.value
        this.dingdanUpdate.huanche.city = data.city.value
        this.dingdanUpdate.huanche.area = data.area.value

      },
      selected(data){

        this.province = data.province.value

        this.city = data.city.value

        this.area = data.area.value

        this.carTest.quche.province = data.province.value
        this.carTest.quche.city = data.city.value
        this.carTest.quche.area = data.area.value

        this.dingdanUpdate.quche.province = data.province.value
        this.dingdanUpdate.quche.city = data.city.value
        this.dingdanUpdate.quche.area = data.area.value
      },
      closes(){
        this.isPoint = false;
        this.inEnd=true
        window.sessionStorage.removeItem("user");
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init()
        })
      },
      denglu(){
        this.dialogTableVisible = true
        this.addOrUpdateVisible = true
        this.$nextTick(() => {
          this.$refs.addOrUpdate.init()
        })
      },
      mapReady({ BMap, map }) {
        // 选择一个经纬度作为中心点
        this.point = new BMap.Point(113.27, 23.13);
        map.centerAndZoom(this.point, 12);
      },
      carWatch(car) {
        this.carTest.carName = car.carName
        this.carTest.imgId = car.imgId
        this.carTest.price = car.price
        this.carTest.productionLife = car.productionLife
        this.carTest.carCode = car.carCode
        this.carTest.back = car.back
        this.carTest.carType = car.carType
        this.carTest.carId = car.id
        if(this.userName!=null){
          this.carTestInfo = true;
          this.carInfo = false
        }else {
          this.$message({
            message:"请先登录或注册",
            type:"warning"
          })
          this.denglu()
        }
      },
      findAllCar(){
        this.$http({
          url: this.$http.adornUrl('/carmanage/findAllCarRand'),
          method: 'get',
        }).then(({data}) => {
          if (data && data.code === 0) {
            this.dataList = data.list
            this.car = data.list[0]
            this.car1 = data.list[1]
            this.car2 = data.list[2]
            this.car3 = data.list[3]
            this.car4 = data.list[4]
            console.log("======car====="+this.car.carName)
            console.log("======car1====="+this.car1.carName)
            console.log("======car2====="+this.car2.carName)
            console.log("======car3====="+this.car3.carName)
            console.log("======car4====="+this.car3.carName)
          } else {
            this.dataList = []
          }
        })
      }
    },
  }
</script>

<style scoped>
#bg{
  min-width: 1200px;width: 100%;height: 50px;position: relative;z-index: 1999;background: #162D46;position: fixed;opacity:0.8;
}
#ss{
  width: 800px;height: 100px;position: relative;z-index: 1999;background: hsla(0,0%,100%,.6);margin-top: -110px;margin-left: 500px;box-shadow: 0 0 15px 0 rgb(23 23 33 / 10%);
  border-radius: 6px;
}
#aaa li:hover{
  color: #FABE00;
}
.bak1{
  width: 490px;
  height: 200px;
  z-index: -1;
  position: absolute;
}
.el-carousel__item h3 {
  color: #475669;
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}
/* 设定地图的大小 */
#allmap{
  height: 450px;
  width: 1000px;
  margin-top: 20px;
  margin-left: 440px;
}
#img1{
  width: 100%;
  height: 520px;
  z-index: -2;
  position: absolute;
  overflow: hidden;
}
.li1{
  color: white;
  margin-top: 30px;
}
.li2{
  color: white;
  float: left;
  margin-left: 60px;
}
.li3{
  float: left;
  margin-left: 30px;
}
.li4{
  margin-top: 10px;
}
#essl >>> .el-dialog__header {
  padding: 0px 0px 0px;

}
#essl >>> .el-dialog__body {
  padding: 0px;

}
</style>
